<template>
	<div class="ChargingMapout">
		<div class="ChargingMap">
			<ctditu></ctditu>
		</div>
		<div class="left_float">
			<p class="p1">全国充电网统计</p>
			<div>
				<p class="p2">实时累计充电量（千瓦时）</p>
				<p class="p3">{{ dituData.totalEnergy }}</p>
			</div>
			<div class="ones">
				<p>运营商</p>
				<p>
					<span class="onesSP">{{ dituData.operator }}</span> <span>家</span>
				</p>
			</div>
			<div class="twos">
				<div class="ones">
					<p>充电站</p>
					<p>
						<span class="onesSP">{{ dituData.stationNum }}</span> <span>座</span>
					</p>
				</div>
				<div class="ones">
					<p>充电中</p>
					<p>
						<span class="onesSP">{{ dituData.chargingStationNum }}</span> <span>座</span>
					</p>
				</div>
			</div>
			<div class="twos">
				<div class="ones">
					<p>充电桩</p>
					<p>
						<span class="onesSP">{{ dituData.stakeNum }}</span> <span>台</span>
					</p>
				</div>
				<div class="ones">
					<p>充电中</p>
					<p>
						<span class="onesSP">{{ dituData.chargingStakeNum }}</span> <span>台</span>
					</p>
				</div>
			</div>
			<div class="ones">
				<p>累计充电订单数</p>
				<p>
					<span class="onesSP">{{ dituData.totalOrderNum }}</span> <span>总订单</span>
				</p>
				<p>
					<span class="onesSP">{{ dituData.totalErrorOrderNum }}</span> <span>异常订单</span>
				</p>
			</div>
			<div class="ones">
				<p>累计充电时长</p>
				<p>
					<span class="onesSP">{{ dituData.totalChargeTimes }}</span> <span>小时</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script lang="js" name="ChargingMap" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import ctditu from './ctditu.vue';
	import {chargeMaptitle} from '@/api/screen/yewuapi.js';

	onMounted(() => {
		getChargeMaptitle();
	});
	const dituData = ref({});
	const getChargeMaptitle = async () => {
		try {
			let res = await chargeMaptitle();
			console.log('getChargeMaptitle-getChargeMaptitle', res);
			dituData.value = res;
		} catch (error) {
			console.log(error);
		}
	};
</script>

<style lang="less" scoped>
	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	.ChargingMap {
		width: 100%;
		height: 88vh;
		position: relative;
	}

	.ChargingMapout {
		display: flex;
		position: relative;

		.left_float {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 264px;
			// background: #aedad9;
			// height: 66vh;
			font-size: 16px;
			box-sizing: border-box;
			padding: 20px;
			color: rgb(104, 104, 104);
			// background-image: url(./u3.svg);
			// background-size: 100% 100%;
			background-image: linear-gradient(to right, #b2c3dd, #00a096); /* 从左到右的绿色渐变色 */
			background-size: 100% 100%;
			p {
				margin-bottom: 0px;
				padding: 0px;
			}

			.p1 {
				font-weight: 300;
				font-style: normal;
				color: rgb(0, 0, 0);
				font-size: 32px;
				margin-bottom: 20px;
			}

			.p3 {
				font-weight: 300;
				font-style: normal;
				font-size: 36px;
				color: rgb(0, 0, 0);
			}

			.onesSP {
				font-weight: 300;
				font-style: normal;
				font-size: 26px;
				color: rgb(0, 0, 0);
			}

			.ones {
				margin-right: 20px;
				margin-bottom: 20px;
			}

			.twos {
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
